<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 2 loading a sprite sheet</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<!-- <script src="pixi.dev.js"></script> -->
</head>
<body>
<script>
// create an array of assets to load
// holder to store aliens
var aliens = [];
var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x3da8bb);
// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// create an empty container
var alienContainer = new PIXI.DisplayObjectContainer();
alienContainer.position.x = 400;
alienContainer.position.y = 300;
stage.addChild(alienContainer);
count = 0;
// start animating
requestAnimFrame(animate);
var graphics = new PIXI.Graphics().beginFill(0xFF0000);//.moveTo(-200, -300).lineTo(200, -300).lineTo(220,100).lineTo(200,300).lineTo(-200,300).endFill();
var liveGraphics = new PIXI.Graphics().beginFill(0xFF0000);
var path = [];
stage.interactive = true;
var isDown = false;
var color = 0;
var colors = [0x5D0776, 0xEC8A49, 0xAF3666, 0xF6C84C, 0x4C779A];
var colorCount = 0;
var label = new PIXI.Text("Click and drag anywhere do draw complex geometry in pixi / do an art attack", {fill:"white", font:"16px Arial"});
label.x = 10;
label.y = 10;
stage.mousedown = function(data)
{
isDown = true;
path = [];
color = colors[colorCount++ % colors.length]
// liveGraphics.clear().beginFill(color);
// liveGraphics.drawCircle(data.global.x, data.global.y, 030);
}
stage.mousemove = function(data)
{
if(!isDown)return;
path.push(data.global.x);
path.push(data.global.y);
//console.log(">>>>")
}
stage.mouseup = function()
{
isDown = false;
graphics.beginFill(color);
graphics.drawPath(path)
graphics.endFill();
path = [];
graphics.mask = liveGraphics
}
//
//
// graphics.drawPath(path);
stage.addChild(graphics);
stage.addChild(liveGraphics);
stage.addChild(label);
function animate() {
count += 0.1;
liveGraphics.clear();
liveGraphics.beginFill(color);
liveGraphics.drawPath(path);
// render the stage
renderer.render(stage);
// graphics.x = 300;
// graphics.y = 399
requestAnimFrame(animate);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = window.innerHeight - 70;
logo.setInteractive(true);
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
</script>
</body>
</html>
